<!--
 * @Author: your name
 * @Date: 2020-11-20 16:02:07
 * @LastEditTime: 2020-12-08 12:04:02
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sende_nuxt\components\common\Filter.vue
-->
<template>
    <div class="filter mb10" @mouseleave="leave()">
      <ul class="filter_nav">
        <li
          class="li ptb20 pr20 mr30"
          @mouseenter="enter(index)"
          v-for="(option, index) of optionData"
          :key="'option' + index"
        >
          {{option.label}}
        </li>
      </ul>
      <ul
        class="filter_box plr30"
        :class="{ active: currentIndex !== -1 }"
        @mouseenter="enter(currentIndex)"
        @mouseleave="leave()">
        <li
          class="li ptb30"
          :class="{ active: currentIndex === index }"
          v-for="(option, index) of optionData"
          :key="'option' + index"
        >
          <el-checkbox-group
            v-model="checkedOptions"
            @change="handleCheckedCitiesChange"
            class="mr30"
          >
            <el-checkbox v-for="(item, j) in option.options" :label="item" :key="'item' + j">
              {{ item.label }}
            </el-checkbox>
          </el-checkbox-group>
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >{{ $t("All||Clear All") }}</el-checkbox>
        </li>
      </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            checkAll: false,
            checkedOptions: [],
            isIndeterminate: false,
            currentIndex: -1,
        }
    },
    props: {
        optionData: {
            type: [Array, Object],
            default: () => []
        }
    },
    methods: {
        /*
        *@params: index >> 索引
        *@description: 鼠标移入
        *@author: Mister Wang
        *@date: 2020-11-20 11:26:52
        */
        enter(index) {
            this.currentIndex = index;
        },
        /*
        *@params:
        *@description: 隐藏筛选
        *@author: Mister Wang
        *@date: 2020-11-20 11:29:58
        */
        leave() {
            this.currentIndex = -1;
        },
        /*
        *@params: val >> 是否全选
        *@description: 筛选当前复选框所有的参数
        *@author: Mister Wang
        *@date: 2020-11-20 15:31:12
        */
        handleCheckAllChange(val) {
        let options = this.optionData[this.currentIndex].options;
        this.checkedOptions = val ? [...options] : [];
        this.isIndeterminate = false;
        this.$emit('checkedOptions', this.checkedOptions);
        },
        /*
        *@params: value >> 选中复选框的数据列表
        *@description: 筛选复选框数据
        *@author: Mister Wang
        *@date: 2020-11-20 15:30:27
        */
        handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        let options = this.optionData[this.currentIndex].options;
        this.checkAll = checkedCount === options.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < options.length;
        this.$emit('checkedOptions', this.checkedOptions);
        },                
    }
}
</script>

<style lang="scss" scoped>
@import "~/assets/scss/index.scss";
.filter {
    position: relative;
    &_nav {
        @include flex-center(flex-start);
        border-bottom: 2px solid $ddd;
        .li {
            font-size: 16px;
            position: relative;
            cursor: pointer;
            &::after {
                content: "";
                position: absolute;
                right: 0;
                top: calc(50% - 6px);
                border: 5px solid $ddd;
                display: inline-block;
                border-width: 0 2px 2px 0;
                transition: all 0.5s;
                transform: rotate(45deg);
                padding: 4px;
            }
            &:hover {
                &::after {
                transition: all 0.5s;
                transform: rotate(-135deg);
                }
            }
        }
    }
    &_box {
        position: absolute;
        right: 0;
        bottom: -80px;
        width: 100%;
        border: 1px solid $ddd;
        background: $cfff;
        box-sizing: border-box;
        display: none;
        z-index: 9;
        .li {
            display: none;
            flex-wrap: wrap;
        }
    }
    .active {
        @include flex();
    }
}
</style>